<template>
  <div id="map-container"></div>
</template>

<script>
import { reactive, shallowRef, toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import AMapLoader from '@amap/amap-jsapi-loader';
// import {mapMark} from '../api/tool'
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    let state = reactive({
      map: shallowRef(null),
      placeData: [],
      AMap: null,
    });
    onMounted(() => {
      state.placeData = store.state.placeData;
      initMap();
    });

    const initMap = () => {
      AMapLoader.load({
        key: '2cff6f14791d781a6cf0fd2fe540427d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          state.AMap = AMap;
          state.map = new AMap.Map('map-container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 15, //初始化地图级别
            center: [116.326281, 28.919445], //初始化地图中心点位置
            // center: [115.89, 28.68], //初始化地图中心点位置
          });

          // 将创建的点标记添加到已有的地图实例：
          // state.map.add(mapMark(AMap,state.placeData));
          return AMap;
        })
        // .then((AMap) => {
        //   console.log(AMap);
        // })
        .catch((e) => {
          console.log(e);
        });
    };
    const changeMap = (x, y) => {
      let position = new state.AMap.LngLat(x, y); // 标准写法
      state.map.setCenter(position);
      state.map.setZoom(13);
    };
    return {
      ...toRefs(state),
      changeMap,
    };
  },
};
</script>
<style lang="less" scoped>
#map-container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 300px;
}
</style>
